<template>
  <div class="mainBox">
    <div class="mainThing">
      <h1 class="animate__animated animate__bounce">
        病 人 标 签 信 息 管 理 系 统
      </h1>
      <div class="leftThing"></div>

      <!-- 登录模块-->
      <div class="loginBox">
        <h2 class="animate__animated animate__backInDown">登 录</h2>
        <br />
        <el-form :model="userLogin" :rules="rules" label-width="50px" ref="form" @keyup.enter.native="submitLogin">
          <el-form-item label="账号" prop="username">
            <el-input type="text" aria-autocomplete="false" v-model="userLogin.username" placeholder="请输入账号"></el-input>
          </el-form-item><br />
          <el-form-item label="密码" prop="password">
            <el-input type="password" aria-autocomplete="false" v-model="userLogin.password" placeholder="请输入密码">
            </el-input>
          </el-form-item>

          <!-- 忘记密码提示框-->
          <div class="someCheckBox">
            <el-link :underline="false" @click="forgetPwd" style="float: left; margin-top: 5px" type="primary">忘记密码？
            </el-link>
            <el-dialog title="提示" :visible.sync="forgetDialogVisible" width="300px" :append-to-body="true" center>
              <el-image style="width: 250px; height: 250px" :src="url" :fit="fit"></el-image>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="forgetDialogVisible = false"
                  v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
              </span>
            </el-dialog>
            <el-form-item>
              <el-checkbox class="myRedCheckBox" v-model="checked">7天自动登录</el-checkbox>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button type="primary" class="submitBox" @click="submitLogin">登录</el-button>
          </el-form-item>
        </el-form>

        <!-- 重置密码对话框-->
        <el-dialog :before-close="resetChangeForm" width="350px" :append-to-body="true" title="新账号，请重置密码！"
          :visible.sync="changePwdVisible">
          <el-form ref="changeForm" :rules="changePwdRule" label-width="100px" :model="changePwdform">
            <el-form-item label="密码" prop="password">
              <el-input show-password type="password" v-model="changePwdform.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordCheck">
              <el-input show-password type="password" v-model="changePwdform.passwordCheck" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetChangeForm">取 消</el-button>
            <el-button type="primary" @click="changePwd">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    clearCookie,
    getCookie
  } from "../utils/cookie";

  export default {
    name: "Login",
    data() {
      return {
        fullscreenLoading: false,       //登录加载动画
        changePwdVisible: false,        //修改密码对话框
        forgetDialogVisible: false,      //忘记密码对话框
        checked: false,                  //是否勾选7天自动登录
        userLogin: {                    //登录（表单用户）
          username: "",
          password: "",
        },
        userDto: {                      //登录用户（传给后端接口的对象）
          username: "",
          password: "",
        },
        cahanPasswordDto: {             //修改密码的用户(传给后端接口的对象)
          username: "",
          password: "",
          newpassword: "",
        },
        changePwdform: {                //密码重置表单数据
          password: "",
          passwordCheck: "",
        },

        rules: {                      //登录表单输入规则校验
          username: [{
              required: true,
              message: "请输入账号",
              trigger: "blur"
            },
            {
              pattern: /^[^\u4e00-\u9fa5]+$/,
              message: "不允许输入中文",
              trigger: "blur",
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
              message: "不允许输入空格等特殊符号",
              trigger: "blur",
            },
            // {
            //   pattern: /[0-9]{1,6}/,
            //   message: "只可以输入数字",
            //   trigger: "blur",
            // },
            // { min: 6, max: 6, message: "账号格式错误", trigger: "blur" },
          ],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              pattern: /^[^\u4e00-\u9fa5]+$/,
              message: "不允许输入中文",
              trigger: "blur",
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
              message: "不允许输入空格等特殊符号",
              trigger: "blur",
            },
            {
              pattern: /[0-9a-zA-Z]{1,6}/,
              message: "只可以输入数字和字母",
              trigger: "blur",
            },
          ],
        },

        changePwdRule: {          //设置密码的表单输入规则验证
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              pattern: /^[^\u4e00-\u9fa5]+$/,
              message: "不允许输入中文",
              trigger: "blur",
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
              message: "不允许输入空格等特殊符号",
              trigger: "blur",
            },
            {
              pattern: /[0-9a-zA-Z]{1,6}/,
              message: "只可以输入数字和字母",
              trigger: "blur",
            },
            {
              min: 6,
              max: 6,
              message: "至少要6位",
              trigger: "blur"
            },
          ],
          passwordCheck: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              pattern: /^[^\u4e00-\u9fa5]+$/,
              message: "不允许输入中文",
              trigger: "blur",
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
              message: "不允许输入空格等特殊符号",
              trigger: "blur",
            },
            {
              pattern: /[0-9a-zA-Z]{1,6}/,
              message: "只可以输入数字和字母",
              trigger: "blur",
            },
            {
              min: 6,
              max: 6,
              message: "至少要6位",
              trigger: "blur"
            },
          ],
        },

        fit: "cover",       //忘记密码对话框图片元素
        url: "http://120.77.71.211:9011/forgetPwd.gif",//忘记密码对话框图片地址
      };
    },

    methods: {
      /**
       * 登录方法
       */
      submitLogin() {
        const _this = this;
        _this.fullscreenLoading = true;
        _this.$refs.form.validate((valid) => {
          // console.log(
          //   _this.$md5(_this.userDto.username + _this.userDto.password)
          // );
          // return;
          //设置密码加密登录
          // _this.userDto.password = _this.$md5(
          //   _this.userLogin.username + _this.userLogin.password
          // );
          _this.userDto.password = _this.userLogin.password;
          this.userDto.username = _this.userLogin.username;
          if (valid) {
            _this.postRequest("/api/login", _this.userDto).then((res) => {
              if (res.data.code == 200) {
                _this.$setCookie("JSSESSIONID", res.data.data.sessionId, "session")
                //判断是否时第一次登录
                if (_this.userLogin.password == "123456") {
                  _this.fullscreenLoading = false;
                  _this.changePwdVisible = true;
                  _this.cahanPasswordDto.password = _this.userDto.password;
                  return;
                } else {
                  _this.fullscreenLoading = false;
                  _this.$notify({
                    title: "登录成功",
                    type: "success",
                  });
                  //判断是否选择了7天自动登录
                  if (_this.checked == true) {
                    _this.$setCookie("token", res.data.data.token, 7);
                    _this.$setCookie("username", res.data.data.username, 7);
                  }
                  if (_this.checked == false) {
                    _this.$setCookie2("token", res.data.data.token);
                    _this.$setCookie("username", res.data.data.username);
                  }
                  _this.$router.replace("/maintable");
                }
              } else {
                _this.fullscreenLoading = false;
                _this.$message.error("账号或密码错误！");
                _this.userLogin = {};
                _this.userDto = {};
              }
            });
          } else {
            _this.fullscreenLoading = false;
            _this.userLogin = {};
            _this.$message.error("请输入正确格式的账号和密码！");
            return false;
          }
        });
      },

      /**
       * 修改密码方法
       */
      changePwd() {
        const _this = this;
        _this.$refs.changeForm.validate((valid) => {
          // _this.$router.replace("/maintable");
          // return;
          if (valid) {
            if (
              _this.changePwdform.password != _this.changePwdform.passwordCheck
            ) {
              _this.$message.error("2次密码不一致，请重新输入！");
              _this.changePwdform = {};
            } else {
              if (
                _this.changePwdform.password == "123456" &&
                _this.changePwdform.passwordCheck == "123456"
              ) {
                _this.$message.error("不能输入此密码！");
                _this.changePwdform = {};
              } else {
                _this.cahanPasswordDto.username = _this.userDto.username;
                //修改密码的加密
                // _this.cahanPasswordDto.newpassword = _this.$md5(
                //   _this.cahanPasswordDto.username +
                //     _this.changePwdform.passwordCheck
                // );
                _this.cahanPasswordDto.newpassword = _this.changePwdform.passwordCheck;
                _this.fullscreenLoading = true;
                _this.userDto.password = _this.cahanPasswordDto.newpassword;
                _this
                  .postRequest("/api/changepassword", _this.cahanPasswordDto)
                  .then((res) => {
                    if (res.data.code == 200) {
                      _this.fullscreenLoading = false;
                      _this.userDto.password = _this.cahanPasswordDto.newpassword;
                      _this.$notify({
                        title: "重置密码成功",
                        type: "success",
                      });
                      //判断是否选择了7天自动登录
                      if (_this.checked == true) {
                        _this.$setCookie("token", res.data.data.token, 7);
                        _this.$setCookie("username", res.data.data.username, 7);
                      }
                      if (_this.checked == false) {
                        _this.$setCookie2("token", res.data.data.token);
                        _this.$setCookie("username", res.data.data.username);
                      }
                      _this.$router.replace("/maintable");

                      _this.resetChangeForm();
                      _this.userLogin = {};
                      _this.userDto = {};
                    } else {
                      _this.fullscreenLoading = false;
                      _this.$notify({
                        title: "重置密码出错",
                        type: "warning",
                      });
                    }
                  });
              }
            }
          } else {
            _this.changePwdform = {};
            _this.$message.error("请输入正确格式密码！");
            return false;
          }
        });
      },

      /**
       * 重置密码对话框取消按钮事件
       */
      resetChangeForm() {
        const _this = this;
        _this.changePwdVisible = false;
        _this.changePwdform = {};
      },

      /**
       * 忘记密码对话框
       */
      forgetPwd() {
        const _this = this;
        _this.forgetDialogVisible = true;
      },
    },

    created() {
      /**
       * 自动登录方法
       */
      const _this = this;
      let token = getCookie("token");
      let formdata = new FormData();
      formdata.append("token", token);
      if (token != "" || token != null) {
        _this.postRequest("/api/tokenlogin", formdata).then((res) => {
          if (res.data.code == 200) {
            _this.$setCookie("JSSESSIONID", res.data.data.sessionId, "session")
            _this.$notify({
              title: "自动登录",
              type: "success",
            });
            _this.$router.replace("/MainTable");
          } else {
            clearCookie("token");
            clearCookie("username");
            clearCookie("JSSESSIONID");
          }
        });
      }
    },
  };
</script>

<style lang="css" scoped>
  @import '../assets/css/login.css';
</style>
